<template>
	<el-row class="adm">
		<div class="top">
			<div class="adm_div1">
				<p class="div1_p1">书城管理系统</p>
			</div>

			<div class="adm_div2">
				<p class="div2_p2">欢迎进入书城管理系统网站&nbsp;登录时间:xxxxx</p>
			</div>

			<div class="adm_div3">
				<img v-bind:src="`http://127.0.0.1/api/public/showimg/${$store.state.pic}`">
				<p>{{$store.state.name}}<i class="el-icon-caret-bottom"></i></p>
				<p>首页</p>
			</div>
		</div>
		
		
		<el-row class="big">
			<!-- 左侧导航栏 -->
			<el-row class="left">
				<el-col>
					<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
						background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :router="true">
						<el-submenu index="1">
							<template slot="title">
								<i class="el-icon-picture"></i>
								<span>热度图片</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="/adm/hotPic">热度图片</el-menu-item>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="2">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span>类型管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="/adm/firstType">一级类型</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item index="/adm/secondType">二级类型</el-menu-item>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="3">
							<template slot="title">
								<i class="el-icon-goods"></i>
								<span>商品管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="/adm/bookList">商品列表</el-menu-item>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="4">
							<template slot="title">
								<i class="el-icon-user-solid"></i>
								<span>用户管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="/adm/updataPwd">冻结密码重置</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item index="/adm/admAdd">管理员添加</el-menu-item>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="5">
							<template slot="title">
								<i class="el-icon-s-order"></i>
								<span>订单管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="/adm/orderDetail">订单详情</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-col>
			</el-row>
			
			<!-- 右侧路由显示 -->
			<el-row class="right">
				<router-view></router-view>
			</el-row>
		</el-row>
	</el-row>

</template>

<script>
	export default {
		name: 'AdmMain',
		data() {
			return {
				handleOpen(key, keyPath) {
					console.log(key, keyPath);
				},
				handleClose(key, keyPath) {
					console.log(key, keyPath);
				}
			}
		}
	}
</script>

<style scoped>
	.big {
		display: flex;
	}

	.right {
		width: 78%
	}

	.left {
		height: 800px;
		width: 18%;
		background-color: #3c404b;
	}

	.top {
		color: white;
		background-color: #23262e;
		height: 70px;
		display: flex;
		justify-content: space-between;
		line-height: 70px;
	}

	.top .adm_div1 .div1_p1 {
		color: #189F92;
		margin-left: 40px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.top .adm_div2 {
		width: 310px;
		margin-right: 700px;
	}

	.top .adm_div2 .div2_p2 {
		color: white;
		border-bottom: 3px solid #189F92;
		height: 67px;
	}

	.top .adm_div3 {
		display: flex;
		color: white;
		margin: 0 20px;
	}

	.top .adm_div3 img {
		border-radius: 50%;
		width: 45px;
		height: 45px;
		margin: 10px 10px;
	}

	.top .adm_div3 p {
		margin: 0 10px;
	}

	.el-menu-item.is-active {
		color: #ffffff;
		background-color: #009688;
	}

	.el-menu-item:hover {
		background-color: #393d49;
	}

	.is-opened.is-active {
		background-color: #393d49;
	}

	.is-opened:hover {
		background-color: #393d49;
	}
</style>